<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/zhide.tool.css" />
		<style type="text/css">
			#sliderSegmentedControl {
				width: 80%;
				margin: 20px auto;
				background: #6495ED;
				border-radius: 20px;
				box-shadow: 1px 1px 1px #888888, 3px 3px 3px #888888 inset;
			}
			#mask {
				position: absolute;
				left: 8px;
				top: 6px;
				width: 55px;
				height: 25px;
				background-color: rgba(135, 236, 250, .7);
				border-radius: 15px;
				z-index: -999;
				transition: left .5s;
				box-shadow: 2px 2px 3px #888888, .5px 1px 3px #FFFFFF inset;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">标题</h1>
		</header>
		<div class="mui-content">
			<!--<div id="slider" class="mui-slider mui-fullscreen">-->
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div id="scroll" class="mui-scroll">
					<div id="mask"></div>
					<a left="8" position="1" class="mui-control-item mui-active" data-wid="test-1.html">
						推荐
					</a>
					<a left="80" position="2" class="mui-control-item" data-wid="test-2.html">
						热点
					</a>
					<a left="155" position="3" class="mui-control-item">
						北京
					</a>
					<a left="230" position="4" class="mui-control-item">
						社会
					</a>
					<!--<a left='303' class="mui-control-item">
						娱乐
					</a>-->
				</div>
			</div>
			<!--</div>-->
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/zhide.tool.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			//setHeaderBackground()
			mui.plusReady(function() {
				var _self = plus.webview.currentWebview();
				var group = new webviewGroup(_self.id, {
					items: [{
						id: "tab-top-subpage-1.html",
						url: "tab-top-subpage-1.html",
						extras: {}
					}, {
						id: "tab-top-subpage-2.html",
						url: "tab-top-subpage-2.html",
						extras: {}
					}, {
						id: "tab-top-subpage-3.html",
						url: "tab-top-subpage-3.html",
						extras: {}
					}, {
						id: "tab-top-subpage-4.html",
						url: "tab-top-subpage-4.html",
						extras: {}
					}, {
						id: "tab-top-subpage-5.html",
						url: "tab-top-subpage-5.html",
						extras: {}
					}],
					onChange: function(obj) {
						var c = document.querySelector(".mui-control-item.mui-active");
						if(c) {
							c.classList.remove("mui-active");
						}
						var target = document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")");
						target.classList.add("mui-active");
						if(target.scrollIntoView) {
							target.scrollIntoView();
						}
					}
				});
				mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
					var wid = this.getAttribute("data-wid");
					group.switchTab(wid);
				});

			});
			var mask = document.getElementById('mask')
			mui(".mui-scroll").on('tap', 'a', function() {
				var left = this.getAttribute("left");
				var position = this.getAttribute("position");
				mask.style.left = left + 'px'
				var scroll = document.getElementById('scroll')
				if(position == 4) {
					scroll.style.transitionDuration = '500ms';
					scroll.style.transform = 'translate3d(-43px, 0px, 0px) translateZ(0px)';
				}
				if(position == 1) {
					scroll.style.transitionDuration = '500ms';
					scroll.style.transform = 'translate3d(0px, 0px, 0px) translateZ(0px)';
				}
			})
		</script>
	</body>

</html>